<!--
 * @Descripttion: 统计数值组件
 * @version: 1.1
 * @Author: sakuya
 * @Date: 2021年6月23日13:11:32
 * @LastEditors: sakuya
 * @LastEditTime: 2022年5月14日19:55:09
-->

<template>
  <div class="sc-statistic">
    <div class="sc-statistic-title">
      {{ title }}
      <el-tooltip
        v-if="tips"
        effect="light"
      >
        <template #content>
          <div style="width: 200px; line-height: 2">
            {{ tips }}
          </div>
        </template>
        <el-icon class="sc-statistic-tips">
          <el-icon-question-filled />
        </el-icon>
      </el-tooltip>
    </div>
    <div class="sc-statistic-content">
      <span
        v-if="prefix"
        class="sc-statistic-content-prefix"
      >{{
        prefix
      }}</span>
      <span class="sc-statistic-content-value">{{ cmtValue }}</span>
      <span
        v-if="suffix"
        class="sc-statistic-content-suffix"
      >{{
        suffix
      }}</span>
    </div>
    <div
      v-if="description || $slots.default"
      class="sc-statistic-description"
    >
      <slot>
        {{ description }}
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: { type: String, required: true, default: "" },
    value: { type: String, required: true, default: "" },
    prefix: { type: String, default: "" },
    suffix: { type: String, default: "" },
    description: { type: String, default: "" },
    tips: { type: String, default: "" },
    groupSeparator: { type: Boolean, default: false },
  },
  data() {
    return {};
  },
  computed: {
    cmtValue() {
      return this.groupSeparator
        ? this.$TOOL.groupSeparator(this.value)
        : this.value;
    },
  },
};
</script>

<style scoped>
.sc-statistic-title {
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.sc-statistic-tips {
  margin-left: 5px;
}
.sc-statistic-content {
  font-size: 20px;
  color: #333;
}
.sc-statistic-content-value {
  font-weight: bold;
}
.sc-statistic-content-prefix {
  margin-right: 5px;
}
.sc-statistic-content-suffix {
  margin-left: 5px;
  font-size: 12px;
}
.sc-statistic-description {
  margin-top: 10px;
  color: #999;
}

.dark .sc-statistic-content {
  color: #d0d0d0;
}
</style>
